<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="user-scalable=no, width=device-width" />  
		<title>MapDemo</title>
		<style>
			html body{
				height: 100%;
				width:100%;
				margin:0px;
				padding: 0px;
			}
			.BaseDiv {
					display: -webkit-flex;
					display: flex;
				height: 100%;
				width:100%;
				margin:0px;
				padding: 0px;
			}
			
			.map {
				width: 100%;
				height: 100%;
			}
			
			.SearchBox {
				z-index: =5;
				background-color: white;
				margin: 5%;
				position: absolute;
				width: 90%;
				height: 10%;
				display: -webkit-flex;
				display: flex;
				border-color: white;
/*				justify-content: center;
				align-items: center;*/
	
			}
			
			.SearchInput {
				width: 85%;
				height: 100%;
				margin: 0px;
				border: 0px;
				padding: 0px;
				border-style: hidden;
				margin-left: 5px;
			}
			
			.headimg {
				width: 5%;
				height: 95%;
				margin: 0px;
				border: 0px;
				padding: 0px;
				border-style: hidden;
				outline: none;
				outline-style: hidden;
				margin: 2px;
				padding :2px;
			}
			
			.SearchButton {
				border-color: deepskyblue;
				width: 15%;
				margin: 0px;
				border: 0px;
				padding: 0px;
				background-color: deepskyblue;
				color: white;
			}
			
			.ZoomArea {
				z-index: =5;
				width: 10%;
				height: 10%;
				top: 45%;
				left: 85%;
				display: -webkit-flex;
				display: flex;
				flex-direction: column;
				position: absolute;
	
			}
			
			.ZoomButton {
				background-color: deepskyblue;
				width: 30px;
				height: 39px;
				border: 1px;
				border-color: deepskyblue;
				border-style: solid;			
				color: white;
			}
			/*			input:focus {
				color: #ed1941;
				border: 0px solid #2468a2;
				background-color: #afdfe4;
				border-color: white;
				margin: 0px;
			}*/
			
			.GoButton {
				z-index: =5;
				width: 10%;
				top: 80%;
				left: 75%;
				flex-direction: column;
				position: absolute;
				margin: 0px;
				width: 90px;
				height: 90px;
				background: red;
				-moz-border-radius: 50px;
				-webkit-border-radius: 50px;
				border-radius: 50px;
				background-color: deepskyblue;
				font-family: "微软雅黑";
				font-style: italic;
				color: white;
				text-align: center;
				text-align: -webkit-center;				
				line-height:80px;
				font-size: 32px;
			}
		</style>
	</head>

	<body >
		<div class="BaseDiv">
			<div id="SearchBox" class="SearchBox">
				<img src="/statics/img/head.jpg" alt="" class="headimg">
				<input placeholder="请输入目的机场" class="SearchInput">
				<input value="搜索" class="SearchButton" type="button">
			</div>
			<div class="ZoomArea">
					<input value="+" type="button" class="ZoomButton" />
					<input value="-" type="button" class="ZoomButton" />
			</div>
			<div id="MapArea" class="map" >
				<img src="/statics/img/timg.jpg" alt="">				
			</div>
			<div>
					<input  type="button" class="GoButton"  value="Go"/>
				</div>
		</div>
	</body>

</html>